<template>
  <div class="holder">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="风过无痕" name="first">
        <Cruds></Cruds>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="second">
        <MainTamin></MainTamin>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 档案信息
import MainTamin from './components/MainTamin.vue'
// 其他信息
import Cruds from './components/cruds.vue'
export default {
  components: {
    Cruds,
    MainTamin
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.holder {
  width: 100%;
  height: 852px;
  padding: 15px 30px;
  // background-color: skyblue;
  margin-top: 35px;
  @media screen and (max-width: 400px) {
    margin-top: 270px;
  }
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 50px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 100px;
  }
}
</style>